<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部导航栏</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <!-- 
            。另外，。
            TODO:
                1.导航菜单默认为垂直模式或者mode="vertical"是垂直，通过mode属性可以使导航菜单变更为水平模式
                    mode="horizontal"
                2. background-color="#545c64" 背景颜色
                3. text-color:字体颜色
                4. active-text-color ；表示当前所在菜单位置的字体颜色
         -->
        <el-menu
                :default-active="activeIndex2"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <el-menu-item index="1">处理中心</el-menu-item>
                <!-- 
                    TODO:
                        5.在菜单中通过submenu组件可以生成二级菜单
                 -->
                <el-submenu index="2">
                    <template slot="title">学科</template>
                    <el-menu-item index="2-1">UI</el-menu-item>
                    <el-menu-item index="2-2">大数据</el-menu-item>
                    <el-menu-item index="2-3">前端</el-menu-item>
                    <el-submenu index="2-4">
                    <template slot="title">JAVA</template>
                    <el-menu-item index="2-4-1">JAVASE</el-menu-item>
                    <el-menu-item index="2-4-2">JAVAME</el-menu-item>
                        <el-submenu index="2-4-3">
                            <template slot="title">JAVAEE</template>
                            <el-menu-item index="2-4-3-1">数据库</el-menu-item>
                            <el-menu-item index="2-4-3-2">web核心</el-menu-item>
                            <el-menu-item index="2-4-3-3">框架</el-menu-item>
                        </el-submenu>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="3" disabled>消息中心</el-menu-item>
                <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
        </el-menu>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data() {
            return {
                activeIndex: '1',
                activeIndex2: '1'
            };
            },
            methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
            }
    });
</script>
</html>